<script lang="ts" setup>
import { ref } from "vue";

const drawerVisible = ref(false);
const popupVisible = ref(false);
</script>

<template id="3fd0d644-4d50-49a8-a621-2bc728aa93e0">
  <umi-container id="9f3488a5-06fd-49b6-b746-72c3eb9e1182" padding="32px 10px" :gap="10" min-height="100vh" bg-color="#f2f2f2">
    <umi-space id="f229f151-b438-41a8-a74b-38b5f17c3e21" direction="vertical" :size="20" align="center">
      <umi-text id="ad012750-b872-4aa5-96b5-8abd2956f577" :size="20" bold>大蓝卡必去榜</umi-text>
      <umi-text id="2cdd1020-b90b-432e-8939-2e3609e39d25" :size="14">用心选品，只为省心</umi-text>
    </umi-space>
    <umi-radio-group id="9251ae71-b4c8-4a4c-bd42-d7558efd810b" default-value="1" type="button">
      <umi-radio id="6a767e86-4dab-4a63-a90a-ff8d1bbd9e19" value="1">今天</umi-radio>
      <umi-radio id="120eba63-5512-4eb1-9f41-0d800961a3b3" value="2">明天</umi-radio>
    </umi-radio-group>
    <umi-card id="650addd9-b3ef-405e-ab75-946e8b05d8d2" :bordered="false" v-for="_ in 4" @click="drawerVisible = true">
      <umi-media id="19fff585-e7e2-42b8-8c1d-19d20908ecd0">
        <umi-container id="603efe56-fca7-464b-8218-4c2de8fc44f5" justify="between" :gap="10" height="100%">
          <umi-space id="88ce9ae8-c723-4eda-a3be-0e4292a4203f" direction="vertical" :size="10">
            <umi-text id="92245bbc-cadb-4aba-9931-e23e10635fb8" :line-height="20">COTX茶月山 | 【超解渴】茉莉绿香柠茶单杯</umi-text>
            <umi-space id="8aab6b6c-33fb-4f44-af0d-4d9ea1753bdc">
              <umi-text id="b5f1d2ff-c4ee-4868-83d1-07480dddcea3" color="#ccc">3.4km</umi-text>
              <umi-text id="e8e9e7ca-d6ce-4080-a69c-9b7526805f75" color="#ccc">领券到店消费</umi-text>
            </umi-space>
          </umi-space>
          <umi-container id="174f1091-9ea7-4ac8-8315-d2d67b76e5d5" direction="horizontal" justify="between">
            <umi-space id="c94dbd47-d929-4471-a862-50d46bbe1c4a" :size="4" align="end">
              <umi-text id="c455f197-c8e6-488a-afc8-51ce256c8bbe" color="#ff0000">折后价￥7.9</umi-text>
              <umi-text id="8205b750-6a18-461f-83cc-40f59329434b" :size="12" through>￥15.8</umi-text>
            </umi-space>
            <umi-text id="1ac0190f-3cb8-43f9-a6b5-e9a8676a7bfe">券剩余10</umi-text>
          </umi-container>
        </umi-container>
      </umi-media>
    </umi-card>
    <umi-divider id="99dea2ab-78a4-4b30-8686-99b3e01e5e4b">暂无更多</umi-divider>
  </umi-container>
  <umi-drawer id="865f92ea-5e7e-445a-beb1-570f12ead353" title="商品卡" position="bottom" v-model:visible="drawerVisible">
    <umi-container id="0a2b3295-817b-46b0-926e-e285dde7f434" padding="0 0 16px" :gap="16">
      <umi-image id="bd599ae2-312c-4cbd-8fff-0a3dbfc6ce95" width="100%" :height="320"></umi-image>
      <umi-text id="27270454-daf2-40c8-beb1-041b24ce5808" bold>COTX茶月山 | 【超解渴】茉莉绿香柠茶单杯</umi-text>
      <umi-container id="281df881-6fff-4361-8dbc-ab0debd668c3" direction="horizontal" justify="between" align="center">
        <umi-space id="a6e6c100-3875-4206-9707-af0290be3494">
          <umi-text id="10d5fe81-3dc3-4157-b258-710a0b56efbe" color="#ccc">距离门店3.4km</umi-text>
          <umi-text id="e126f0aa-089a-4dec-bf47-90600d8b6229" color="#ccc">领券到店消费</umi-text>
        </umi-space>
        <umi-button id="2ccef415-064b-4143-a82f-a62557d1905f" size="mini">去导航</umi-button>
      </umi-container>
      <umi-container id="267f1fd4-5eb2-4929-a8df-9b7cffb8fdd1" direction="horizontal" justify="between">
        <umi-space id="9b7e9c45-66e3-46a7-ab31-0ab226a8f380" :size="4" align="end">
          <umi-text id="83fa400c-66fd-4c24-ba5d-35b6e6feb953" color="#ff0000">折后价￥7.9</umi-text>
          <umi-text id="84985422-7c4c-4eab-913e-de01c3bc3fa6" :size="12" through>￥15.8</umi-text>
        </umi-space>
        <umi-text id="e17542ca-e477-42fe-b4f3-abb2b28239b1">券剩余10</umi-text>
      </umi-container>
    </umi-container>
    <umi-container id="607a8ac9-79ec-4f0d-a63d-3aa38af3222e" direction="horizontal" :gap="10">
      <umi-button id="be74b5f1-c064-455d-929f-51f168db9fea" type="primary" shape="round" full size="middle">联系门店</umi-button>
      <umi-button
        id="bbe90a6d-e153-4d2b-a258-ef93279cbdb9"
        type="primary"
        shape="round"
        full
        size="middle"
        @click="
          drawerVisible = false;
          popupVisible = true;
        "
        >我要领券</umi-button
      >
    </umi-container>
  </umi-drawer>
  <umi-popup id="211afa27-74d8-468e-a18a-2b91b0ee5b89" :visible="popupVisible" :width="300">
    <umi-container id="debfbf41-ed39-41b5-b6ee-7124b8f5716f" :gap="16">
      <umi-image id="ee9d8b3d-d913-4bfb-97ac-00585657e7be" width="100%" :height="160"></umi-image>
      <umi-text id="29cd9e98-6f4f-4987-8e0c-4bde731b3f46">1. 此优惠券截止今日22:00后会失效</umi-text>
      <umi-text id="29cd9e98-6f4f-4987-8e0c-4bde731b3f46">2. 到店出示优惠券码可用折后价消费</umi-text>
      <umi-button id="48c440ff-e993-415b-b652-528de989af7b" type="primary" shape="round" size="middle" @click="popupVisible = false">确认领券</umi-button>
    </umi-container>
  </umi-popup>
</template>
